﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test1.aspx.cs" Inherits="WebTest.Test1" %>

<%@ Register assembly="GrayParrot.Web.Controls" namespace="GrayParrot.Web.Controls" tagprefix="cc1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

<%--    <script type="text/javascript" lang="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" lang="javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>--%>

    <asp:PlaceHolder ID="PlaceHolder1" runat="server">   
        <%: System.Web.Optimization.Scripts.Render("~/bundles/JQuery") %>          
        <%: System.Web.Optimization.Scripts.Render("~/bundles/JQueryUI") %>  
                     
        <%: System.Web.Optimization.Styles.Render("~/bundles/Datatables/css") %>
        <%: System.Web.Optimization.Scripts.Render("~/bundles/Datatables") %>
    </asp:PlaceHolder>

    <link type="text/css" rel="stylesheet" href="/assets/css/bootstrap/bootstrap.min.css" />
    <link type="text/css" rel="stylesheet" href="/assets/css/bootstrap/bootstrap-themes.css" />
    <link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" />
    
    <script type="text/javascript" lang="javascript" src="../Scripts/GrayParrot.Core.js"></script> 
    <script type="text/javascript" lang="javascript" src="../Scripts/GrayParrot.DataTables.js"></script> 
    <script type="text/javascript" lang="javascript" src="../Scripts/GrayParrot.Modals.js"></script> 

    <script type="text/javascript" src="/assets/plugins/bootstrap/bootstrap.min.js"></script>

    <style>
        .externaly_triggered_wrapper {
            width: 600px;
            display: inline-block;
            margin-bottom: 50px;
        }

        .input-group .select2-container {
            position: relative;
            z-index: 2;
            float: left;
            width: 100%;
            margin-bottom: 0;
            display: table;
            table-layout: fixed;
        }
    </style>
</head>
<body>

    <div>

    <select id="select2">
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
    </select>
        <% HttpContext.Current.Response.Write(this.JQDTable.RenderExternalFilters()); %>

              <cc1:JQDataTable ID="JQDTable" runat="server" 
                     SelectionMode="Multi" 
                     RenderScripts="false" 
                     BootstrapClasses="table table-hover table-bordered ">
                    <FeaturesConfig>
                        <Features>
                            <cc1:Searching Value="Both" ExternalFilters="true">
                                <Filters>
                                    <cc1:ColumnFilter ColumnName="FirstName" Type="Text" />
                                    <%--<cc1:ColumnFilter ColumnName="LastName" Type="Text" />--%>
                                    <cc1:ColumnFilter ColumnName="Title" Type="Text" />
<%--                                    <cc1:DateColumnFilter ColumnName="BirthDate" DateFormat="dd/mm/yyyy" IsRange="true" />
                                    <cc1:CustomChoiceFilter ColumnName="PostalCode" DefaultLabel="Postal Code" FilterDefaultLabel="seleziona..." >
                                        <Data>
                                            <cc1:DataItem name="Siaa" value="true" IsDefault="true" />
                                            <cc1:DataItem name="Noaa" value="false" />
                                        </Data>
                                    </cc1:CustomChoiceFilter>--%>
                                    
<%--                                    <cc1:SelectColumnFilter ColumnName="CompanyName" 
                                        SelectType="Simple" Url="/api/Customers/LoadCompanies"
                                        IdProp="value" TextProp="name" Width="500"
                                        MinimumInputLength="2"/>--%>
                                 <%--   EnablePagination="true" PageSize="20" Width="450"--%>
                                </Filters>
                            </cc1:Searching>
                            <cc1:AutoWitdh Value="true" />
                            <cc1:ScrollY Value="500" ScrollCollapse="true" />
                            <cc1:LengthChange Value="true" />
                            <cc1:Paging PagingType="FullNumbers" PageLength="20" />
                        </Features>
                    </FeaturesConfig>
                    <ControllerConfig Url="/api/Employee/Load" LoadingMode="OnLoad">
                    </ControllerConfig>
                    <ColumnsConfig Key="EmployeeId">
                        <Columns>
                            <cc1:TextColumn Name="EmployeeId" Header="Id" Visible="true" />
                            <cc1:TextColumn Name="FirstName" Header="FirstName" />
                            <cc1:TextColumn Name="LastName" Header="LastName" />
                            <cc1:TextColumn Name="Title" Header="Title" DefaultContent="cc" />
                            <cc1:DateColumn Name="BirthDate" Header="Birth Date" />
                            <cc1:TextColumn Name="PostalCode" Header="PostalCode" />
                            <cc1:ActionColumn>
                                <Actions>
                                    <cc1:ActionButton Text="Prova" Callback="SayHello" />
                                    <cc1:ActionLink Text="Vai" Callback="SayHello2" />
                                    <%-- <cc1:ActionIcon Icon="fa fa-pencil" Callback="SayHello" />--%>
<%--                                    <cc1:ActionIcon Icon="fa fa-search" Callback="SayHello" Class="search" />
                                    <cc1:ActionIcon Icon="fa fa-pencil" Callback="SayHello2" Class="pencil" />--%>
                                </Actions>
                            </cc1:ActionColumn>
                        </Columns>
                    </ColumnsConfig>
<%--                    <Toolbar>
                        <cc1:IconButton Icon="fa-plus" Callback="LoadAddDialog" />
                        <cc1:IconButton Icon="fa-edit" Callback="LoadAddDialog" />
                        <cc1:IconButton Icon="fa-minus" Callback="LoadAddDialog" />
                        <cc1:IconButton Icon="fa-trash-o" Callback="LoadAddDialog" />
                    </Toolbar>--%>
                    <Buttons>
<%--                        <cc1:CrudAddButton Text="Aggiungi" Callback="LoadAddDialog" />
                        <cc1:CrudEditButton Text="Modifica" Callback="LoadEditDialog" />
                        <cc1:CrudDeleteButton Text="Cancella" Callback="DeleteDialog" />--%>
                        <cc1:UtilityButton Text="XLS" Type="ExportToExcel" Title="Cronologia" />
                    </Buttons>
                </cc1:JQDataTable>

        <br />

        

    </div>


    <% HttpContext.Current.Response.Write(this.JQDTable.RenderScriptsManually()); %>

</body>

    <script>
        $(document).ready(function () {

            //YacfBootstrapTweaks();

            //$('#externaly_triggered_wrapper_JQDTable').addClass('externaly_triggered_wrapper');

            // BOOTSTRAP: Tweaks
            $('.yadcf-filter-wrapper').addClass('input-group');
            $('.yadcf-filter, .yadcf-filter-date', this).addClass('form-control input-sm');
            $('.yadcf-filter-reset-button', this).addClass('btn btn-default btn-sm').wrap('<span class="input-group-btn"></span>');


            $('#select2').select2({
                minimumResultsForSearch: 2, //Infinity,
                width: 300,
                //id: 'value',
                //formatSelection: function (item) { { alert('1'); return item.name; } },
                //formatResult: function (item) {{ return item.name; }},
                ajax: {
                    url: "/api/Customers/LoadCompanies",
                    dataType: 'json',
                    type: "POST",
                    params: { contentType: 'application/json; charset=utf-8' },
                    data: function (params) {
                        //params.page = params.page || 1;

                        return {
                            searchTerm: params.term
                            //,pageSize: 30
                            //,pageNumber: params.page
                        };

                    },
                    processResults: function (data, params) {
                        //params.page = params.page || 1;

                        return {
                            results: $.map(data.Results, function (item) {

                                var obj = {
                                    text: item.name,
                                    id: item.value
                                };

                                return obj;
                            })
                            //,pagination: {
                            //    more: (params.page * 30) < data.Total
                            //}
                        };
                    }
                }
            });
        });

        function LoadData() {
            $.ajax({
                type: 'POST',
                url: '/api/Customers/LoadCompanies',
                //data: JSON.stringify(dataJSON),
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (response) {
                    alert(response);
                }
            });
        }

        function SayHello(obj) {

            alert(obj);

        }

        function SayHello2(obj) {

            alert(obj);

        }
    </script>
</html>
